<template>
  <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
    <div class="print-main">
      <table>
        <caption style="height: 30px;color: #303133;">
          <h2>{{receiptData.communityName}}收费单</h2>
          <div>
            <div style="border-bottom: 1px solid #303133; width:300px; margin-bottom: 2px;"></div>
            <div style="border-bottom: 1px solid #303133; width:300px;"></div>
          </div>
        </caption>
        <tbody>
        <tr style="height:30px;">
          <td valign="center" rowspan="1" colspan="3" style="text-align:left;border:none;">
            {{receiptData.no}}
          </td>
        </tr>
        <tr style="height:30px;">
          <td valign="center" rowspan="1" colspan="2" style="text-align:left;border:none;">
            客户名称：{{receiptData.ownerName}}
          </td>
          <td valign="center" rowspan="1" colspan="4" style="text-align:center;border:none;">
            收款日期：{{receiptData.billDate}}
          </td>
          <td valign="center" rowspan="1" colspan="3" style="text-align:right;border:none;">
            收款人：{{receiptData.billUser}}
          </td>
        </tr>
        <tr>
          <td v-for="itemCm in itemCloumns" :valign="itemCm.valign" :class="itemCm.class">{{itemCm.name}}</td>
        </tr>
        <template v-for="(detail,dlIndex) in receiptData.receiptDetails">
          <tr :key="dlIndex">
            <td valign="center" class="td-solid">{{detail.roomName}}</td>
            <td valign="center" class="td-solid">{{itemFormat(detail)}}</td>
            <td valign="center" class="td-solid">{{detail.beginTime}}~{{detail.finishTime}}</td>
            <td valign="center" class="td-solid">{{detail.prices}}</td>
            <td valign="center" class="td-solid">{{detail.receivableMoney}}</td>
            <td valign="center" class="td-solid">{{detail.paymentCycle,'{y}-{m}'|parseTime}}</td>
            <td valign="center" class="td-solid">{{detail.amountAmount}}</td>
            <td valign="center" class="td-solid">{{detail.billMoney}}</td>
            <td valign="center" class="td-solid">{{detail.specialMoney}}</td>
          </tr>
        </template>
        <tr>
          <td valign="center" class="td-solid">合计</td>
          <td valign="center" class="td-solid" colspan="2">{{receiptData.billMoney|digitUppercase}}</td>
          <td valign="center" class="td-solid"></td>
          <td valign="center" class="td-solid"> {{receiptData.receivableMoney}}</td>
          <td valign="center" class="td-solid"></td>
          <td valign="center" class="td-solid">{{receiptData.amountAmount}}</td>
          <td valign="center" class="td-solid">{{receiptData.paidMoney}}</td>
          <td valign="center" class="td-solid">{{receiptData.specialMoney}}</td>
        </tr>
        <tr>
          <td colspan="9" align="left">优惠政策：</td>
        </tr>
        <tr>
          <td colspan="9" align="left">说明：凭此收据换发票（押金除外），本收据收款单位盖章有效，手写无效（盖章处）</td>
        </tr>
        <tr>
          <td colspan="9" align="left">
            <span class="mr10">本次应收金额：{{receiptData.receivableMoney}}</span>
            <span class="mr10">收到金额：{{receiptData.billMoney}}</span>
            <span class="mr10">优惠金额：{{receiptData.specialMoney}}</span>
            <span class="mr10">冲抵金额：{{receiptData.amountAmount}}</span>
            <span class="mr10">转存金额：{{receiptData.transferAmount}}</span>
            <div class="fr">
                        <span class="mr20">
                          收款方式:
                          <template v-for="(mode,modeIndex) in receiptData.modePayments">
                                {{dict.label.collection_method[mode.collectionMethod]}}[{{mode.billMoney}}]{{modeIndex != (receiptData.modePayments.length-1)?',':'' }}
                          </template>
                        </span>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <el-form :model="form" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="打印模板" prop="printTempletId">
        <el-select v-model="form.printTempletId" placeholder="" clearable size="small">
          <el-option
            v-for="dict in printTempletOptions"
            :key="dict.id"
            :label="dict.title"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handlePreviwTemp(1)">打印收据</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script>
  import {listItem} from "@/api/payfee/item";
  import {listPrintTemplet} from "@/api/system/printTemplet";
  import {previwTemp} from "@/api/ureport/baseExportTemp";

  export default {
    name: "print_receipt",
    dicts: ['collection_method'],
    data() {
      return {
        form: {printTempletId: null},
        title: '打印收据',
        open: false,
        itemCloumns: [
          {name: '房间名称', valign: 'center', class: 'td-solid'},
          {name: '收费项目', valign: 'center', class: 'td-solid',},
          {name: '费用区间', valign: 'center', class: 'td-solid'},
          {name: '单价', valign: 'center', class: 'td-solid'},
          {name: '应收金额', valign: 'center', class: 'td-solid'},
          {name: '缴费周期', valign: 'center', class: 'td-solid'},
          {name: '冲抵金额', valign: 'center', class: 'td-solid'},
          {name: '实收金额', valign: 'center', class: 'td-solid'},
          {name: '优惠金额', valign: 'center', class: 'td-solid'}
        ],
        receiptData: {},
        //收费项目字典
        itemOptions: [],
        //打印模板字典
        printTempletOptions: []
      }
    },
    methods: {
      show(option) {
        this.form.printTempletId = option.printTemplate ||null
        this.receiptData = option.receiptData
        listItem().then(res => {
          this.itemOptions = res.rows;
        })
        this.getListPrintTemplet()
        this.open = true
      },
      itemFormat(row, column) {
        let index = this.itemOptions.findIndex(x => x.chargeId == row.chargeId);
        if (index != -1) {
          return this.itemOptions[index].chargeName
        }
        return '';
      },
      //打印模板字典
      getListPrintTemplet() {
        listPrintTemplet({templetType: '10', status: '0'}).then(res => {
          this.printTempletOptions = res.rows
        })
      },
      handlePreviwTemp(flag) {
        if (!this.form.printTempletId) {
          this.msgWarning("请选择打印模板。")
          return;
        }

        let receiptData = this.receiptDataFactory()
        let index = this.printTempletOptions.findIndex(x => x.id == this.form.printTempletId)
        if (index != -1) {
          let row = this.printTempletOptions[index]
          let value = Object.assign(row, {tempItems: JSON.parse(row.tempContent || '[]')})
          if ((flag = 1)) {
            this.$lodop.preview(value, [receiptData])
          } else {
            this.$confirm('确认直接打印吗？', '确认信息')
              .then((isPass) => {
                if (isPass) {
                  this.$lodop.print(value,  [receiptData])
                }
              })
              .catch()
          }
        }
      },
      receiptDataFactory() {
        //收款数据工厂
        let tmpData = {
          communityName: this.receiptData.communityName,
          receiptNo: this.receiptData.receiptNo,
          ownerName: this.receiptData.ownerName,
          billDate: this.receiptData.billDate,
          billUser: this.receiptData.billUser,
          receivableMoney: this.receiptData.receivableMoney,
          billMoney: this.receiptData.billMoney,
          specialMoney: this.receiptData.specialMoney,
          amountAmount: this.receiptData.amountAmount,
          transferAmount: this.receiptData.transferAmount,
          favouredPolicyName:this.receiptData.favouredPolicyName,
          modePayment: this.getModePayment(),
          receiptDetails: this.getReceiptDetails()
        }
        return tmpData
      },
      getModePayment(){
        let msg = []
        let modePayments = this.receiptData.modePayments
        for(let i in modePayments){
          let row = modePayments[i]
          let collectionMethod = this.dict.label.collection_method[row.collectionMethod]
          msg.push(`${collectionMethod}[${row.billMoney}]`)

        }
        return msg.join(",")
      },
      getReceiptDetails(){
        let receiptDetails = []
        for(let i in this.receiptData.receiptDetails){
          let row = this.receiptData.receiptDetails[i]
          receiptDetails.push({
            roomName: row.roomName,
            chargeName: this.itemFormat(row),
            costRange: ` ${row.beginTime}~${row.finishTime}`,
            prices:  row.prices,
            receivableMoney:  row.receivableMoney,
            paymentCycle:  this.parseTime(row.paymentCycle,'{y}-{m}'),
            amountAmount:  row.amountAmount,
            billMoney:  row.billMoney,
            specialMoney:  row.specialMoney
          })
        }
        return receiptDetails
      }
    }
  }
</script>

<style lang="scss" scoped>
  .print-main {
    display: grid;
    margin-bottom: 30px;

    .td-solid {
      word-break: break-all;
      border-width: 1px;
      border-style: solid;
    }
  }


</style>
